function useSkeletonScript() {
  const GlobalDetectClickEvent = (e) => {
    e.stopPropagation()
    e.preventDefault()

    // NOTE: 获取节点基础信息 , 位置 / 宽高
    const { width, height, left, top } = e.target.getBoundingClientRect()
    // NOTE: 为节点添加唯一标识 , 用于判断操作是添加色块还是删除色块
    if (!e.target.dataset.skeletonId) {
      e.target.dataset.skeletonId = Number(new Date())
    }
    const { skeletonId } = e.target.dataset

    // NOTE: postMessage 传输内容
    window.parent.postMessage({ width, height, top, left, id: skeletonId, source: 'iframe' }, '*')
  }

  const GlobalDetectMouseOverEvent = (e) => {
    e.stopPropagation()
    e.preventDefault()

    e.target.classList.add('skeleton-outline')

    // TODO: 可优化点 , 重复绑定
    e.target.addEventListener('mouseout', () => {
      e.target.classList.remove('skeleton-outline')
    })
  }

  // NOTE: 接受到 message 后激活代码
  if (window.location.port) {
    // window.addEventListener('message', (e) => {
    // if (e.data !== 'connect') return
    // NOTE: 添加全局 class 样式 , box-shadow 可以避免布局变化 , 造成抖动
    const styleTag = document.createElement('style')
    styleTag.innerText = '.skeleton-outline { box-shadow: inset 0 0 0px 1px #333; }'
    document.head.appendChild(styleTag)

    // NOTE: 全局监听 click 事件 , 用于传递点击节点信息
    window.document.addEventListener('click', GlobalDetectClickEvent, true)

    // NOTE: 全局监听鼠标移入节点事件 , 配合添加的全局 class 样式来展示 iframe 中选中节点
    window.document.addEventListener('mouseover', GlobalDetectMouseOverEvent)
    // })
  }
}

export default useSkeletonScript
